.el-container {
  min-height: 624px;
  min-width: 1280px;
  width: 100vw;
  height: 100vh;
  display: inherit;
  background-color: var(--kb-custom-bg-color-current);
}

@media screen and (min-width: 1281px) {

  // >=1281
  //1080p分辨率的浏览器放大不超过150%
  .el-container {
    font-size: 14px;
  }
}

@media screen and(min-width: 960px) and (max-width: 1280px) {

  // >=960 && <=1280
  .el-container {
    font-size: 14px;
  }
}

@media screen and(max-width: 959px) {

  // <=959
  .el-container {
    font-size: 14px;
  }
}

// show side
.kb_nav-container.el-container {
  .el-header {
    height: 7vh;
    line-height: 7vh;
    position: relative;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #4848483d;
  }

  .el-aside {
    width: 240px;
    height: calc(100% - 7vh);
    overflow-x: hidden;
    overflow-y: auto;
    float: left;
    /* 第一个方块颜色，第二个轨道颜色(用于更改火狐浏览器样式) */
    scrollbar-color: #105fd5 #105fd53d;
    /* 火狐、Edge滚动条无法自定义宽度，只能通过此属性使滚动条宽度变细 */
    scrollbar-width: thin;
    transition: all .1s;
    border-right: 1px solid #4848483d;
  }

  .el-main {
    width: calc(100% - 240px);
    height: calc(100% - 7vh);
    padding: 0px;
    transition: all .1s;
    position: relative;
    overflow: hidden;
    background-color: var(--kb-custom-el-main-bg-color);
  }

  .el-footer {
    width: 100%;
    height: 30px;
    line-height: 30px;
    position: absolute;
    bottom: 0px;
    right: 0px;
    padding: 0px;
    border-top: 1px solid #4848483d;
  }
}

// hide side
.kb_nav-container.kb_hide-side.el-container {
  .el-aside {
    width: 0px;
  }

  .el-main {
    width: 100%;
  }
}
